<template>
  <div
    style="height: 100%;display: flex;justify-content: flex-start"
    v-empty="!oa.careerAssessment.index"
    xs-empty-icon="nopermission"
    xs-empty-text="暂无权限"
  >
    <div v-loading="dataLoading">
      <el-row style="height: 100%">
        <el-col style="height: 100%;width: 400px;margin-right: 20px">
          <div class="assessment-list" v-loading="pageLoading">
            <div class="search-header">
              <flexbox
                justify="space-between"
                style="height: 50px;line-height: 50px;font-size: 20px; di"
              >
                <span>职业动机问卷列表</span>
                <el-button
                  type="primary"
                  @click="exportPdf"
                  v-if="oa.careerAssessment.export && userInfo.username"
                >导出分析报告</el-button>
              </flexbox>
              <el-input
                v-model="search"
                placeholder="请输入姓名或电话搜索"
                @keyup.enter.native="getCareerAssessmentList"
                clearable
                @clear="getCareerAssessmentList"
              >
                <el-button slot="append" icon="el-icon-search" @click="getCareerAssessmentList"></el-button>
              </el-input>
            </div>
            <div style="height:calc(100% - 100px)">
              <div style="height: 100%;overflow: auto">
                <ul style="min-height: calc(100% - 35px)" v-infinite-scroll="scrollCurrentChange" :infinite-scroll-disabled="disabled">
                  <li
                    class="assement-item"
                    v-for="(item,index) in careerAssessmentList"
                    :key="index"
                    :class="{'active-item': activeIndex == index}"
                    @click="selectAssessmentFun(item,index)"
                  >
                    <flexbox justify="space-between" style="width: 100%">
                      <flexbox
                        direction="column"
                        style="min-width: 200px;text-align: left;padding: 5px 0"
                      >
                        <flexbox>
                          <span style="font-weight: bold;font-size: 16px">{{item.username}}</span>
                          <span style="padding-left: 10px;color: #b9acac">{{item.createTime}}</span>
                        </flexbox>
                        <flexbox>{{item.phone}}</flexbox>
                      </flexbox>
                    </flexbox>
                  </li>
                </ul>

                <p v-show="dataLoading" style="width: 100%;text-align: center;line-height: 30px;">
                  加载中 <i class="el-icon-loading"></i>
                </p>
                <p v-show="noMore" style="width: 100%;text-align: center;line-height: 30px;">没有更多了</p>
              </div>
            </div>
          </div>
        </el-col>
        <el-col style="height: 100%;width: calc(100% - 420px)">
          <div class="assessment-detail oa-bgcolor">
            <div class="header">
              <el-tabs v-model="activeName">
                <el-tab-pane label="职业动机分析报告" name="1">
                  <analysis-report
                    id="analysisReport"
                    :userInfo="userInfo"
                    @contextmenu.prevent="onContextmenu"
                  ></analysis-report>
                </el-tab-pane>
              </el-tabs>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import AnalysisReport from "./components/AnalysisReport.vue";
import {
  wikiGetDimensionConfig,
  wikiGetCareerAssessmentList,
  wikiGetAnalysisReport,
  wikiGetGetCareerAssessmentInfo,
} from "@/api/oamanagement/workbench";
import { pageToPdf } from "@/utils/exportHtmlToPdf.js";

export default {
  data() {
    return {
      activeName: "1",
      search: "",
      dimensionConfig: [],
      careerAssessmentList: [],
      currentPage: 1,
      pageSize: 15,
      totalNum: 0,
      activeIndex: 0,
      dataLoading: false,
      pageLoading: false,
      userInfo: {},
    };
  },
  components: {
    AnalysisReport,
  },
  computed: {
    ...mapGetters(["oa"]),
    noMore() {
      return this.careerAssessmentList.length >= this.totalNum;
    },
    disabled() {
      return this.dataLoading || this.noMore;
    },
  },
  filters: {
    /** 根据type 找到组件 */
    filterConfigName(name, item, description) {
      return description + "：" + item[name];
    },
  },
  created() {
    this.getDimensionConfig();
    this.$nextTick(function () {
      this.getCareerAssessmentList();
    });
  },
  methods: {
    blurFun() {
      this.staffData = [];
    },

    //获取纬度信息
    getDimensionConfig() {
      wikiGetDimensionConfig()
        .then((res) => {
          this.dimensionConfig = res.data.dimensionConfig;
        })
        .catch();
    },

    // 匹配纬度配置信息
    handleDimensionData() {
      console.log(this.dimensionConfig);
    },

    //获取问卷信息列表
    getCareerAssessmentList() {
      this.currentPage = 1;
      this.pageSize = 15;
      let param = {
        search: this.search.trim(),
        page: this.currentPage,
        limit: this.pageSize,
      };
      this.pageLoading = true;
      wikiGetCareerAssessmentList(param)
        .then((res) => {
          this.pageLoading = false;
          this.totalNum = res.data.totalNum;
          this.careerAssessmentList =
            res.data.careerAssessmentList != null
              ? res.data.careerAssessmentList
              : [];
          this.activeIndex = 0;
          this.userInfo = {
            username: this.careerAssessmentList[0].username,
            phone: this.careerAssessmentList[0].phone,
          };
        })
        .catch((res) => {
          this.pageLoading = false;
        });
    },

    handleConfigType(name, item) {
      return item[name] == "高风险"
        ? "danger"
        : item[name] == "风险"
        ? "warning"
        : "success";
    },

    //点击查看某个用户问卷信息
    selectAssessmentFun(item, index) {
      let self = this;
      self.userInfo.username = item.username;
      self.userInfo.phone = item.phone;
      self.activeIndex = index;
    },

    //导出PDF
    exportPdf() {
      let name = this.userInfo.username + "的职业动机问卷报告";
      this.dataLoading = true;
      document.getElementById("analysisReport") .getElementsByClassName("warp")[0].scrollTop = 0;
      document.getElementById("analysisReport").getElementsByClassName("warp")[0].style = 'overflow:visible';
      // 需要显示的文档长度
      let showHeight = document.getElementById("analysisReport").scrollHeight - document.getElementById("analysisReport").getElementsByClassName("m6-explain")[0].scrollHeight;
      let showWidth = document.getElementById("analysisReport").scrollWidth;
      let result = pageToPdf(document.getElementById("analysisReport"), name,'onePage',showHeight).then(res => {
        document.getElementById("analysisReport").getElementsByClassName("warp")[0].style = 'overflow:auto';
        this.dataLoading = false;
      }).catch(res => {
        document.getElementById("analysisReport").getElementsByClassName("warp")[0].style = 'overflow:auto';
        this.dataLoading = false;
        this.$message.error('导出失败');
      });
    },

    //向下滚动刷新数据
    scrollCurrentChange() {
      this.dataLoading = true;
      this.currentPage++;
      let param = {
        search: this.search.trim(),
        page: this.currentPage,
        limit: this.pageSize,
      };
      wikiGetCareerAssessmentList(param)
        .then((res) => {
          this.dataLoading = false;
          this.totalNum = res.data.totalNum;
          if (
            res.data.careerAssessmentList &&
            res.data.careerAssessmentList.length
          ) {
            this.careerAssessmentList = this.careerAssessmentList.concat(
              res.data.careerAssessmentList
            );
          }
        })
        .catch((res) => {
          this.dataLoading = false;
        });
    },
  },
};
</script>

<style scoped lang="scss">
@import "../styles/tabs.scss";
.assessment-list {
  height: 100%;
  width: 400px;
  min-width: 400px;
  margin-right: 20px;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  .search-header {
    height: 100px;
    padding: 0 10px;
    background-color: #fff;
  }
  .assement-item {
    padding: 5px;
    background-color: #fff;
    border-radius: 4px;
    border-left: 4px solid #fff;
    margin-bottom: 5px;
    cursor: pointer;
    &:hover {
      box-shadow: 0 0 8px 0 #d8e1ed;
      background-color: #fafafa;
    }
  }
  .active-item {
    border-left: 4px solid #0089ff;
  }
}
.assessment-detail {
  width: 700px;
  min-width: 700px;
  max-width: 700px;
  .header {
    height: 100%;

    .el-tabs /deep/ {
      height: 100%;
      display: flex;
      flex-direction: column;
      .el-tabs__content {
        flex: 1;
        display: flex;
        flex-direction: column;
        .el-tab-pane {
          display: flex;
          flex-direction: column;
          flex: 1;
          min-height: 0;
        }
      }
    }
  }
}
</style>
